<template>
  <AvicModal
    :visible="true"
    :title="`最新签审信息`"
    :body-style="{ padding: 0 }"
    width="80%"
    height="80%"
    :centered="true"
    @cancel="closeModal"
  >
    <div class="flow-chart">
      <div class="history-box">
        <AvicBpmTrackingTemplate ref="AvicBpmTrackingTemplateRef" current-tab="list3" :flow-param="flowData" />
      </div>
      <div class="bpm-x6chart">
        <AvicBpmFlowCanvas ref="flowCanvas" :graph-option="graphOption" :data="props.flowData" />
      </div>
    </div>
    <template #footer>
      <a-button title="返回" type="primary" ghost @click="closeModal">返回</a-button>
    </template>
  </AvicModal>
</template>
<script lang="ts" setup>
import AvicBpmTrackingTemplate from '@/views/avic/bpm/flowdetail/components/bpm-tracking-template/index.vue';
import bpmUtils from '@/views/avic/bpm/bpmutils/FlowUtils';
import AvicBpmFlowCanvas from '@/views/avic/bpm/flowdetail/components/bpm-flow-canvas/index.vue';
const { proxy } = getCurrentInstance();
const props = defineProps({
  entryId: {
    type: String,
    required: true,
    default: ''
  },
  flowData: {
    type: Object,
    default: () => {}
  }
});
const AvicBpmTrackingTemplateRef = ref(null);
const flowCanvas = ref(null);
const flowData = ref({
  url: `${bpmUtils.baseurl}/business/doGettracks/v1`,
  parameter: {
    entryId: props.entryId
  },
  method: 'post'
});
const graphOption = {
  panning: false, // 打开拖动
  grid: false
};
const $emit = defineEmits(['close']);

function closeModal() {
  $emit('close');
}
onMounted(() => {
  setTimeout(() => {
    AvicBpmTrackingTemplateRef.value.refreshFlowTracking();
    proxy.$nextTick(() => {
      flowCanvas.value.initFlow(props.flowData.value);
    });
  }, 300);
});
</script>
<style lang="less" scoped>
.main {
  border: 1px solid #d6dce3;
}
.flow-chart {
  height: 100%;
}
.history-box {
  height: 60%;
}
.bpm-spin-box {
  height: 100%;
}
.ant-spin-nested-loading {
  height: 100%;
}
:deep(.ant-spin-container) {
  height: 100%;
  > div {
    height: 100%;
  }
}
.bpm-x6chart {
  height: 40%;
  width: 100%;
  background-color: #ffffff;
  border-radius: 0px 0px 6px 6px;
  :deep(.x6-graph-scroller) {
    overflow: visible !important;
    .x6-graph {
      box-shadow: none;
    }
  }
}
</style>
